<template>
    <div>
      <el-table
        :data="expenses"
        border
        style="width: 100%">
        <el-table-column
          fixed
          align="center"
          prop="expenseData"
          label="报销时间"
          width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="recruitStuName"
          label="报销人"
          width="200">
        </el-table-column>
        <el-table-column
          prop="expensePrice"
          label="报销费用"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          prop="teacherName"
          label="审批人"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          prop="expenseTime"
          label="审批时间"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          label="审批状态"
          align="center"
          width="200">
          <template slot-scope="scope">
            {{scope.row.expenseState==1?'通过':scope.row.expenseState==2?'不通过':'未审批'}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.expenseState==0">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
              <el-dropdown>
                <el-button type="text" size="small"  style="margin-left: 10px">审批</el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button type="text" size="small" @click="updateState(scope.row,1)">通过</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text" size="small" @click="updateState(scope.row,2)">不通过</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        @current-change="currentChange"
        :current-page="currentPage"
        background
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
      <el-dialog
        title="详情"
        :visible.sync="dialogVisible"
        width="30%">
        <el-form v-model="expense" label-width="80px">
          <el-form-item label="报销日期:" prop="expenseData">
            {{expense.expensePrice}}
          </el-form-item>
          <el-form-item label="报销人:" prop="recruitStuName">
            {{expense.recruitStuName}}
          </el-form-item>
          <el-form-item label="报销费用:" prop="expensePrice">
            {{expense.expenseData}}
          </el-form-item>
          <el-form-item label="审批人:" prop="expenseData">
            {{expense.teacherName}}
          </el-form-item>
          <el-form-item label="审批时间:" prop="expenseData">
            {{expense.expenseTime}}
          </el-form-item>
          <el-form-item label="审批状态:" prop="expenseData">
            {{expense.expenseState}}
          </el-form-item>
          <el-form-item label="报销详情:" prop="expenseData">
            {{expense.expenseDetail}}
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
import { initExpense, editExpense } from '../../../api/tea/expense'
import { delExpense } from '../../../api/stu/expense'

export default {
  data() {
    return {
      currentPage: 1,
      total: 100,
      expenses: [{
        recruitStuName:'',
        expenseDetail: '2',
        expenseId: '1',
        expensePrice: '1',
        expenseState: '0',
        expenseTime: '1',
        teacherName: '1',
        expenseData: '1'
      }],
      expense: {
        recruitStuName:'',
        expenseDetail: '1',
        expenseId: '1',
        expensePrice: '1',
        expenseState: '1',
        expenseTime: '1',
        teacherName: '1',
        expenseData: '1'
      },
      dialogVisible: false
    }
  },
  methods: {
    // 查看详情
    handleClick(row) {
      let old = JSON.stringify(row);
      this.expense = JSON.parse(old)
      this.dialogVisible = true
    },
    // 获取当前页信息
    currentChange(page) {
      this.currentPage = page;
      initExpense((this.currentPage)).then(response=>{
        console.log(response.data.records)
        this.expenses = response.data.records
      })
    },
    // 审批
    updateState(expense,state) {
      this.$confirm('此操作将一经确认不允许修改, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        expense.expenseState = state;
        console.log(expense)
        editExpense(expense).then(response=>{
          this.$message({
            message: response.msg,
            type: 'success'
          })
          this.currentChange(this.currentPage)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 删除
    del(row){
      this.$confirm('此操作将删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delExpense(row.expenseId).then(response=>{
          this.$message({
            message: response.msg,
            type: 'success'
          })
          this.currentChange(this.currentPage)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created() {
    this.currentChange(1)
  }
}
</script>

<style scoped>

</style>
